<template>
  <div class="vivid-split-container">
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ViSplitContainer',
  provide() {
    return {
      splitContainer: this
    }
  },
  data() {
    return {
      panes: []
    }
  },
  methods: {
    addPane(pane) {
      this.panes.push(pane)
    },
    removePane(pane) {
      const index = this.panes.indexOf(pane)
      if (index !== -1) {
        this.panes.splice(index, 1)
      }
    }
  }
}
</script>

<style scoped>
.vivid-split-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>
